<template>
	<div class="app">
		<!-- <h2>name:{{ name }}</h2>
		<h2>sName:{{ sName }}</h2>
		<h2>level:{{ sLevel }}</h2>
		<h2>avater:{{ avaterURL }}</h2> -->

		<hr />
		<!-- <h2>cName:{{ cName }}</h2>
		<h2>cLevel:{{ cLevel }}</h2> -->
		<hr />
		<h2>hName:{{ name }}</h2>
		<h2>hLevel:{{ level }}</h2>
		<button @click="changeLevel">changeLevel</button>
	</div>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				name: 'zs',
			}
		},
		computed: {
			// mapState返回的一个一个函数
			// ...mapState(['name', 'level', 'avaterURL']),

			// 名称冲突
			...mapState({
				sName: (state) => state.name,
				sLevel: (state) => state.level,
				avaterURL: (state) => state.avaterURL,
			}),
		},
	}
</script>

<script setup>
	import { computed, toRefs } from 'vue'
	import { mapState, useStore } from 'vuex'
	import useState from './hooks/useState'

	// 1. 普通版本
	/* const { name, level } = mapState(['name', 'level'])

	const store = useStore()
	const cName = computed(name.bind({ $store: store }))
	const cLevel = computed(level.bind({ $store: store })) */

	// hooks版本
	// const { hName, hLevel } = useState(['name', 'level'])

	// 直接对store, state进行解构
	const store = useStore()
	const { name, level } = toRefs(store.state)

	function changeLevel() {
		store.state.level++
	}
</script>

<style scoped></style>
